<template>
	<view class="hall">
		<view class="top_row">
			<image class="img" src="/static/img/device/7.png" mode=""></image>
			<text>今日取水18次 日累计取水5.4L</text>
		</view>

		<view class="device_list">
			<view class="li" @click="util.linkTo('/pages/device/deviceDetail')">
				<view class="tit_row">
					智热机<text class="id_num">SZ2542</text>
				</view>
				<view class="img_box">
					<image class="img" src="/static/img/device/8.png" mode=""></image>
				</view>
			</view>

			<view class="li" @click="util.linkTo('/pages/device/deviceDetail')">
				<view class="tit_row">
					茶吧机<text class="id_num">SZ2542</text>
				</view>
				<view class="img_box">
					<image class="img" src="/static/img/device/9.png" mode=""></image>
				</view>
			</view>

			<view class="li" @click="util.linkTo('/pages/device/deviceDetail')">
				<view class="tit_row">
					智热机<text class="id_num">SZ2542</text>
				</view>
				<view class="img_box">
					<image class="img" src="/static/img/device/10.png" mode=""></image>
				</view>
			</view>

			<view class="li" @click="util.linkTo('/pages/device/deviceDetail')">
				<view class="tit_row">
					智热机<text class="id_num">SZ2542</text>
				</view>
				<view class="img_box">
					<image class="img" src="/static/img/device/11.png" mode=""></image>
				</view>
			</view>

			<view class="li" @click="util.linkTo('/pages/device/deviceDetail')">
				<view class="tit_row">
					智热机<text class="id_num">SZ2542</text>
				</view>
				<view class="img_box">
					<image class="img" src="/static/img/device/12.png" mode=""></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
</script>

<style lang="scss">
	.hall {
		padding: 24px;
		box-sizing: border-box;

		.top_row {
			padding: 14px 0 38px;
			display: flex;
			align-items: center;

			.img {
				margin-right: 20px;
				width: 40px;
				height: 40px;
			}

			text {
				font-size: 24px;
				font-weight: normal;
				color: rgba(0, 0, 0, 0.645);

			}
		}

		.device_list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			.li {
				margin-bottom: 24px;
				padding: 32px 26px;
				box-sizing: border-box;
				width: 339px;
				background: #FFFFFF;
				border-radius: 16px 16px 16px 16px;
				opacity: 1;

				.tit_row {
					font-size: 32px;
					font-family: PingFang SC-粗体, PingFang SC;
					font-weight: normal;
					color: #000000;

					.id_num {
						margin-left: 12px;
						padding: 8px;
						box-sizing: border-box;
						background: #FFFFFF;
						border-radius: 8px 8px 8px 8px;
						border: 1px solid rgba(0, 0, 0, 0.1);

						font-size: 24px;
						font-family: MiSans-Normal, MiSans;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.25);
					}
				}

				.img_box {
					width: 100%;
					display: flex;
					justify-content: flex-end;

					.img {
						width: 340px;
						height: 320px;
					}
				}
			}
		}
	}
</style>
